<!doctype html>
<html lang="en">
  <head>
    <meta
      http-equiv="Content-Security-Policy"
      content="
        default-src 'self' 'unsafe-inline' blob: resource:;
        object-src 'self' blob:;
        frame-src 'self' blob:;
      "
    />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="/apps/web/index.css" />
    <title>Test 25</title>
    <script type="text/javascript" src="/dist/pdf-lib.js"></script>
    <script type="text/javascript" src="/apps/web/utils.js"></script>
  </head>

  <body>
    <div id="button-container">
      <button onclick="window.location.href = '/apps/web/test24.html'">
        Prev
      </button>
      <button onclick="test()">Run Test</button>
      <button onclick="window.location.href = '/apps/web/test26.html'">
        Next
      </button>
    </div>
    <!-- <div  ></div> -->
    <iframe id="iframe"></iframe>
  </body>

  <script type="text/javascript">
    // startFpsTracker('animation-target');

    const renderInIframe = (pdfBytes) => {
      const blob = new Blob([pdfBytes], { type: 'application/pdf' });
      const blobUrl = URL.createObjectURL(blob);
      document.getElementById('iframe').src = blobUrl;
    };

    async function test() {
      const { PDFDocument, PDFPage, radians, StandardFonts, rgb, degrees } =
        PDFLib;

      const pdfDoc = await PDFDocument.create();
      const firstPage = pdfDoc.addPage([1000, 1000]);

      const fontSize = 20;

      const svg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="409" height="602" viewBox="-9.746610357857302 -12.53611913758613 18.181818181818183 26.761502556123585" data-plugin-name="science" alt=" ">
      <rect x="-9.746610357857302" y="-12.53611913758613" width="18.181818181818183" height="26.761502556123585" fill="#00ff00"/>
      <g transform="scale(1 -1) translate(0 -1.689264280951324)">
      <g transform="translate(-7.154396186440678 4.212791313559322) scale(1 -1) "><svg viewBox="0 0 32 32" width="4.576271186440678" height="4.110169491525422"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="692640ba-d133-4cb2-8c3e-d1483bb7141f" preserveAspectRatio="xMidYMid"><path d="M14.814 10.811a1.049 1.049 0 0 0-1.791-.742l-6.971 6.972 1.484 1.483 5.18-5.18v17.607c0 .58.47 1.049 1.049 1.049h9.084v-2.1h-8.035V10.81z" fill="#000000FF"></path><path d="M19.25 25.254V8.148l6.665-6.664L24.43 0l-6.97 6.971a1.05 1.05 0 0 0-.308.742v18.59c0 .58.47 1.05 1.05 1.05h7.745v-2.099h-6.696z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(1.955773305084744 0.017876059322032845) scale(1 -1) "><svg viewBox="0 0 32 32" width="3.8983050847457648" height="6.059322033898304"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="3b8642ac-fae7-4db2-ad01-f129efa090a9" preserveAspectRatio="xMidYMid"><path d="M16 2.395c-1.848 0-3.61.371-5.217 1.041V0H8.696v4.527C4.91 6.946 2.396 11.185 2.396 16s2.514 9.054 6.3 11.473V32h2.087v-3.436A13.53 13.53 0 0 0 16 29.604c1.848 0 3.61-.37 5.217-1.04V32h2.087v-4.527c3.786-2.419 6.3-6.658 6.3-11.473 0-7.502-6.102-13.605-13.604-13.605zm5.217 23.871a11.431 11.431 0 0 1-4.173 1.204v-6.654l.613.614 1.476-1.476L16 16.822l-3.133 3.132 1.476 1.476.614-.613v6.653a11.43 11.43 0 0 1-4.174-1.204V15.652h10.434v10.614zm2.087-1.367v-10.29c0-.577-.467-1.044-1.043-1.044H9.739c-.576 0-1.043.467-1.043 1.044v10.29A11.5 11.5 0 0 1 4.482 16a11.5 11.5 0 0 1 4.214-8.899v1.942c0 .577.467 1.044 1.043 1.044h8.309V8h-7.265V5.734c1.567-.8 3.34-1.252 5.217-1.252 6.35 0 11.517 5.167 11.517 11.518a11.5 11.5 0 0 1-4.213 8.898z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(-1.5188029661016937 4.9331302966101696) scale(1 -1) "><svg viewBox="0 0 32 32" width="2.203389830508474" height="1.7796610169491522"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="d05badb9-a4b7-4e30-8dc4-010b0d91bb35" preserveAspectRatio="xMidYMid"><path d="M26.113 14.583c-.454 0-.855.295-.99.728l-1.055 3.375-2.731-6.373 6.308-6.308v1.92h2.074V3.5c0-.573-.464-1.037-1.037-1.037h-4.424v2.074h1.92l-5.787 5.787a1.037 1.037 0 0 0-1.692.414l-.68 1.958-3.08 3.08-1.855-5.055a1.037 1.037 0 0 0-.974-.68h-.004a1.037 1.037 0 0 0-.973.688l-2.865 8.024-1.419-3.521a1.037 1.037 0 0 0-.962-.65H0v2.074h5.187l2.177 5.406c.122.303.376.524.68.61L2.646 28.07l1.466 1.466 9.998-9.997.915 2.494c.15.409.54.68.974.68h.01c.438-.004.826-.283.97-.697l2.8-8.067 3.487 8.135a1.037 1.037 0 0 0 1.944-.1l1.664-5.327H32v-2.074h-5.887zM9.642 21.075l2.482-6.95 1.2 3.268-3.682 3.681zm6.33-2.483-.245-.67.732-.731-.486 1.4z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(-8.552701271186441 5.568723516949152) scale(1 -1) "><svg viewBox="0 0 32 32" width="1.991525423728814" height="1.694915254237289"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="c209572f-73be-4e6c-8364-e7450affcfc3" preserveAspectRatio="xMidYMid"><path d="M4.522 14.957H.696v2.087h3.826V32h2.087V0H4.522v14.957zM19.13 0h-2.086v32h2.086V0zm12.175 14.956h-3.826v-8c0-.576-.468-1.043-1.044-1.043h-4.174c-.576 0-1.043.467-1.043 1.043v18.087c0 .577.467 1.044 1.043 1.044h4.174c.576 0 1.044-.467 1.044-1.044v-8h3.826v-2.087zM25.392 24h-2.087V8h2.087v16zM13.913 5.913H9.74c-.576 0-1.043.467-1.043 1.043v18.087c0 .577.467 1.044 1.043 1.044h4.174c.576 0 1.044-.467 1.044-1.044V6.956c0-.576-.468-1.043-1.044-1.043zM12.87 24h-2.087V8h2.087v16z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(2.294756355932204 4.721265889830509) scale(1 -1) "><svg viewBox="0 0 32 32" width="2.6694915254237284" height="2.1186440677966107"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="ba0d8b78-8ba9-45df-bb3f-33b4b16535b9" preserveAspectRatio="xMidYMid"><path d="M32 14.957H19.13V3.478h-2.086v25.044h2.086V17.043H32v-2.086zm-21.844-.001H0v2.087h10.156v7.305h2.087V7.652h-2.087v7.304z" fill="#000000FF"></path><path d="M24.695 11.826h2.087V9.39h2.435V7.304h-2.434V4.87h-2.088v2.435h-2.434v2.087h2.434v2.435z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(-8.256091101694915 -0.6600900423728806) scale(1 -1) "><svg viewBox="0 0 32 32" width="2.0338983050847457" height="2.88135593220339"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="0ca43c6b-17e5-4164-b08e-3481f886143b" preserveAspectRatio="xMidYMid"><path d="M29.235 24.283A19.266 19.266 0 0 0 16 19.043a19.266 19.266 0 0 0-13.235 5.24l1.428 1.52a17.183 17.183 0 0 1 10.764-4.63V32h2.087V21.173a17.183 17.183 0 0 1 10.763 4.63l1.428-1.52zm-.714-14.127H17.044V0h-2.087v10.156H3.478v2.087h25.043v-2.087z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(-4.5272775423728815 -2.185513771186441) scale(1 -1) "><svg viewBox="0 0 32 32" width="2.0338983050847457" height="2.7542372881355925"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="84ab8473-7175-4154-a097-0dfe720bcd40" preserveAspectRatio="xMidYMid"><g clip-path="url(#a)" fill="#000000FF"><path d="M32 14.957H21.844V3.478h-2.087v25.044h2.087V17.043H32v-2.086zm-21.844 0H0v2.086h10.156v11.479h2.087V3.478h-2.087v11.479z"></path></g><defs><clippath id="a"><path fill="#fff" d="M0 0h32v32H0z"></path></clippath></defs></svg></svg></g>
<g transform="translate(-0.7560911016949152 1.4585540254237284) scale(1 -1) "><svg viewBox="0 0 32 32" width="1.991525423728815" height="2.4576271186440675"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="23765d34-5f56-467f-ac87-07c9aafd3da3" preserveAspectRatio="xMidYMid"><path d="M29.425 0H16.384a1.04 1.04 0 0 0-1.041 1.04v7.782H12.74L2.949 5.056a1.041 1.041 0 0 0-1.415.971v19.946a1.041 1.041 0 0 0 1.415.971l9.792-3.766h2.602v7.781A1.04 1.04 0 0 0 16.383 32h13.042a1.04 1.04 0 0 0 1.04-1.04V1.04A1.04 1.04 0 0 0 29.426 0zM3.615 7.543l7.892 3.035v10.844l-7.891 3.035V7.543zm9.974 13.553V10.904h5.59v10.192h-5.59zm14.795 8.822h-10.96v-6.74h2.795a1.04 1.04 0 0 0 1.041-1.04V9.862a1.04 1.04 0 0 0-1.04-1.04h-2.796V2.081h10.96v27.836z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(6.828654661016948 5.441604872881356) scale(1 -1) "><svg viewBox="0 0 32 32" width="2.2033898305084776" height="2.5"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="f8c17d6b-18c7-4904-a6ca-4f8272358a07" preserveAspectRatio="xMidYMid"><path d="M8.348 14.957H3.13v2.087h5.218V32h2.087V0H8.348v14.957zm20.522-.001h-5.218v-8c0-.576-.467-1.043-1.044-1.043h-4.173c-.577 0-1.044.467-1.044 1.043v18.087c0 .577.467 1.044 1.044 1.044h4.174c.576 0 1.043-.467 1.043-1.044v-8h5.217v-2.087zM21.564 24h-2.087V8h2.087v16z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(5.345603813559324 1.373808262711865) scale(1 -1) "><svg viewBox="0 0 32 32" width="2.711864406779659" height="2.3305084745762716"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="46e95ee3-062d-496b-8043-fa8343b030c3" preserveAspectRatio="xMidYMid"><path d="M8.348 14.957H3.13v2.087h5.218V32h2.087V0H8.348v14.957zm20.522-.001h-5.218v-8c0-.576-.467-1.043-1.044-1.043h-4.173c-.577 0-1.044.467-1.044 1.043v18.087c0 .577.467 1.044 1.044 1.044h4.174c.576 0 1.043-.467 1.043-1.044v-8h5.217v-2.087zM21.564 24h-2.087V8h2.087v16z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(-0.9679555084745761 -1.4651747881355934) scale(1 -1) "><svg viewBox="0 0 32 32" width="2.3305084745762716" height="2.5"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="f85dbddc-8988-454d-a503-b92c7920e7f6" preserveAspectRatio="xMidYMid"><path d="M24.309 14.957V7.072h-2.087v7.885h-2.087V7.072h-2.087v7.541L7.124 7.891a1.043 1.043 0 0 0-1.59.888v6.178H0v2.086h5.533v6.177a1.043 1.043 0 0 0 1.59.889l10.925-6.723v7.541h2.087v-7.884h2.087v7.884h2.087v-7.884H32v-2.086h-7.691zM7.62 21.352V10.647L16.32 16l-8.7 5.353z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(-8.637447033898304 -4.643140889830509) scale(1 -1) "><svg viewBox="0 0 32 32" width="1.6949152542372872" height="1.4406779661016937"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="f47b94bb-45a7-42da-bd2c-00eccc98499f" preserveAspectRatio="xMidYMid"><path d="M28.286 14.957C27.755 8.644 22.448 3.669 16 3.669c-6.448 0-11.755 4.975-12.286 11.288H0v2.087h3.714C4.245 23.356 9.552 28.33 16 28.33c6.448 0 11.755-4.975 12.286-11.287H32v-2.087h-3.714zM16 26.244c-5.296 0-9.667-4.04-10.191-9.2h5.053l6.565-6.456L15.964 9.1l-5.956 5.857h-4.2C6.334 9.797 10.705 5.756 16 5.756s9.667 4.04 10.191 9.2h-4.626v2.088h4.626c-.524 5.16-4.895 9.2-10.191 9.2z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(-5.332362288135593 -5.236361228813559) scale(1 -1) "><svg viewBox="0 0 32 32" width="1.8644067796610173" height="1.6525423728813564"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="ea24a1b0-f673-4266-b43e-598ca93c5df3" preserveAspectRatio="xMidYMid"><path d="M21.906 14.957V0h-2.087v14.613L8.895 7.891a1.043 1.043 0 0 0-1.59.889v6.177H0v2.087h7.304v6.177a1.044 1.044 0 0 0 1.59.888l10.925-6.722V32h2.087V17.044H32v-2.088H21.906zM9.39 21.352V10.647L18.09 16l-8.7 5.353z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(-1.476430084745763 -5.236361228813559) scale(1 -1) "><svg viewBox="0 0 32 32" width="1.864406779661019" height="1.5677966101694913"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="cecb1976-4fea-4464-97d2-f5d8e48f0300" preserveAspectRatio="xMidYMid"><path d="M17.043 3.714V0h-2.087v3.714C8.644 4.245 3.67 9.552 3.67 16c0 6.448 4.975 11.755 11.287 12.286V32h2.087v-3.714c6.313-.531 11.288-5.838 11.288-12.286 0-6.448-4.975-11.755-11.288-12.286zM16 10.783a1.045 1.045 0 0 1 0 2.087 1.045 1.045 0 0 1 0-2.087zm0 10.434a1.045 1.045 0 0 1 0-2.087 1.045 1.045 0 0 1 0 2.087zm1.043 4.974V24h2.435v-2.087h-.877a3.112 3.112 0 0 0 .53-1.74A3.134 3.134 0 0 0 16 17.044a3.134 3.134 0 0 0-3.13 3.13c0 .644.195 1.242.528 1.74h-.876V24h2.434v2.191c-5.16-.524-9.2-4.895-9.2-10.191 0-5.296 4.04-9.667 9.2-10.191V8h-2.434v2.087h.876a3.113 3.113 0 0 0-.529 1.74 3.134 3.134 0 0 0 3.13 3.13 3.134 3.134 0 0 0 3.131-3.13c0-.644-.195-1.242-.529-1.74h.877V8h-2.435V5.809c5.16.524 9.2 4.895 9.2 10.191 0 5.296-4.04 9.667-9.2 10.191z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(-3.7221927966101696 5.992452330508474) scale(1 -1) "><svg viewBox="0 0 32 32" width="1.7796610169491522" height="1.398305084745763"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="261981c3-6cd4-448b-a0b2-7dc91a5fa40e" preserveAspectRatio="xMidYMid"><path d="M17.043 3.714V0h-2.087v3.714C8.644 4.245 3.67 9.552 3.67 16c0 6.448 4.975 11.755 11.287 12.286V32h2.087v-3.714c6.313-.531 11.288-5.838 11.288-12.286 0-6.448-4.975-11.755-11.288-12.286zM16 10.783a1.045 1.045 0 0 1 0 2.087 1.045 1.045 0 0 1 0-2.087zm0 10.434a1.045 1.045 0 0 1 0-2.087 1.045 1.045 0 0 1 0 2.087zm1.043 4.974V24h2.435v-2.087h-.877a3.112 3.112 0 0 0 .53-1.74A3.134 3.134 0 0 0 16 17.044a3.134 3.134 0 0 0-3.13 3.13c0 .644.195 1.242.528 1.74h-.876V24h2.434v2.191c-5.16-.524-9.2-4.895-9.2-10.191 0-5.296 4.04-9.667 9.2-10.191V8h-2.434v2.087h.876a3.113 3.113 0 0 0-.529 1.74 3.134 3.134 0 0 0 3.13 3.13 3.134 3.134 0 0 0 3.131-3.13c0-.644-.195-1.242-.529-1.74h.877V8h-2.435V5.809c5.16.524 9.2 4.895 9.2 10.191 0 5.296-4.04 9.667-9.2 10.191z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(1.3625529661016955 6.119570974576272) scale(1 -1) "><svg viewBox="0 0 32 32" width="1.7796610169491522" height="1.8220338983050866"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="422c40a5-1a29-48c9-8469-6693c47da282" preserveAspectRatio="xMidYMid"><path d="M23.304 4.527V0h-2.087v3.436A13.53 13.53 0 0 0 16 2.396c-1.848 0-3.61.37-5.217 1.04V0H8.696v4.527C4.91 6.946 2.396 11.185 2.396 16s2.514 9.054 6.3 11.473V32h2.087v-3.436A13.53 13.53 0 0 0 16 29.604c1.848 0 3.61-.37 5.217-1.04V32h2.087v-4.527c3.786-2.419 6.3-6.658 6.3-11.473s-2.514-9.054-6.3-11.473zM10.783 5.734c1.567-.8 3.34-1.252 5.217-1.252 1.877 0 3.65.452 5.217 1.252V8H10.783V5.734zm10.434 20.532c-1.567.8-3.34 1.252-5.217 1.252-1.877 0-3.65-.452-5.217-1.252V24h10.434v2.266zm2.087-1.367v-1.943c0-.576-.467-1.043-1.043-1.043H9.739c-.576 0-1.043.467-1.043 1.043v1.942A11.5 11.5 0 0 1 4.482 16a11.5 11.5 0 0 1 4.214-8.898v1.941c0 .577.467 1.044 1.043 1.044h12.522c.576 0 1.043-.467 1.043-1.044V7.102A11.5 11.5 0 0 1 27.518 16a11.5 11.5 0 0 1-4.214 8.898z" fill="#000000FF"></path><path d="M17.722 12.803 16 14.524l-1.722-1.721-1.475 1.475L14.524 16l-1.721 1.722 1.475 1.475L16 17.476l1.722 1.721 1.475-1.475L17.476 16l1.721-1.722-1.475-1.475z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(-4.5272775423728815 -0.914327330508474) scale(1 -1) "><svg viewBox="0 0 32 32" width="1.4406779661016955" height="1.0593220338983054"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="e774fe6d-1519-4016-84cc-6a43490a0e71" preserveAspectRatio="xMidYMid"><path d="M16 2.395c-1.848 0-3.61.371-5.217 1.041V0H8.696v4.527C4.91 6.946 2.396 11.185 2.396 16s2.514 9.054 6.3 11.473V32h2.087v-3.436A13.53 13.53 0 0 0 16 29.604c1.848 0 3.61-.37 5.217-1.04V32h2.087v-4.527c3.786-2.419 6.3-6.658 6.3-11.473 0-7.502-6.102-13.605-13.604-13.605zm5.217 23.871a11.431 11.431 0 0 1-4.173 1.204v-6.654l.613.614 1.476-1.476L16 16.822l-3.133 3.132 1.476 1.476.614-.613v6.653a11.43 11.43 0 0 1-4.174-1.204V15.652h10.434v10.614zm2.087-1.367v-10.29c0-.577-.467-1.044-1.043-1.044H9.739c-.576 0-1.043.467-1.043 1.044v10.29A11.5 11.5 0 0 1 4.482 16a11.5 11.5 0 0 1 4.214-8.899v1.942c0 .577.467 1.044 1.043 1.044h8.309V8h-7.265V5.734c1.567-.8 3.34-1.252 5.217-1.252 6.35 0 11.517 5.167 11.517 11.518a11.5 11.5 0 0 1-4.213 8.898z" fill="#000000FF"></path></svg></svg></g>
<g transform="translate(-8.679819915254237 1.7127913135593218) scale(1 -1) rotate(-90 1.0169491525423728 0.8898305084745761)"><svg viewBox="0 0 32 32" width="2.0338983050847457" height="1.7796610169491522"><svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="02f524b6-8a90-46d6-84e3-c440578cf982" preserveAspectRatio="xMidYMid"><path d="M27.375 25.012 25.3 12.667a2.422 2.422 0 0 0-2.395-2.014h-3.12c.365-.635.575-1.37.575-2.152 0-2.39-1.955-4.336-4.359-4.336-2.403 0-4.358 1.945-4.358 4.336 0 .783.209 1.517.575 2.152h-3.12c-1.187 0-2.2.851-2.395 2.015L4.625 25.014c-.118.7.08 1.42.542 1.962s1.139.86 1.853.86h17.962c.714 0 1.392-.318 1.853-.86a2.41 2.41 0 0 0 .54-1.964zM16.002 6.692c1.002 0 1.819.811 1.819 1.81 0 .998-.817 1.81-1.82 1.81a1.817 1.817 0 0 1-1.82-1.81c0-1 .817-1.81 1.82-1.81z" fill="#000000FF"></path></svg></svg></g>
<path id="aadb8040-c668-40d4-a65b-8982a52b6afb" stroke="#000000FF" stroke-width="0.13336296954878862" stroke-linecap="round" stroke-linejoin="round" fill="#000000FF" d="M-2.578125,2.2338453389830493 Q-1.9933792372881345,2.28469279661017, -1.5188029661016937,2.318591101694916 C-1.044226694915253,2.3524894067796622, -0.7306673728813546,2.369438559322034, -0.20524364406779583,2.4033368644067794 C0.320180084745763,2.4372351694915246, 0.7608580508474563,2.47113347457627, 1.1083156779661003,2.4880826271186427 C1.4557733050847443,2.5050317796610155, 1.3456038135593218,2.4965572033898287, 1.5320444915254239,2.4880826271186427 C1.718485169491526,2.4796080508474567, 1.8879766949152548,2.572828389830508, 2.0405190677966107,2.445709745762712 Q2.1930614406779667,2.3185911016949157, 2.294756355932204,1.8524894067796618Z"></path>
      </g>
    </svg>`;

      const svg2 = `<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M300,200 H150 A150,150 0 1,0 300,50 z" fill="red"/>
  <circle r="5" fill="black" cx="300" cy="200"/>
  <circle r="5" fill="green" cx="150" cy="200"/>
  <circle r="5" fill="blue" cx="300" cy="50"/>
</svg>`;

      const svg3 = `<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" id="692640ba-d133-4cb2-8c3e-d1483bb7141f" preserveAspectRatio="xMidYMid">
  <path d="M14.814 10.811a1.049 1.049 0 0 0-1.791-.742l-6.971 6.972 1.484 1.483 5.18-5.18v17.607c0 .58.47 1.049 1.049 1.049h9.084v-2.1h-8.035V10.81z" fill="#000000FF"/>
  <circle r="0.3" fill="red" cx="14.8" cy="10.8"/>
  </svg>`;

      const svg4 = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="437" height="437" viewBox="-5.766990291262136 -11.939927184466018 8.349514563106796 8.194174757281553" style="width: 437px; height: 437px;">
  <g transform="scale(1 -1) translate(0 0)">
    <ellipse cx="-1.5000455013203968" cy="8.015083253349824" rx="2.5000000000000004" ry="2.426413513777" transform="rotate(0.34568480052757566 -1.5000455013203968 8.015083253349824)" stroke-width="0.04576659038901602" stroke="black" fill="none"/>
    <ellipse cx="-2.5" cy="8.75" rx="0.20594965675057209" ry="0.20594965675057209" fill="#000000ff"/>
    <ellipse cx="-0.5" cy="8.5" rx="0.20594965675057209" ry="0.20594965675057209" fill="#000000ff"/>
    <path d="M -0.9955958173813108,6.843589816313437 A 0.9999999999999999,0.9999999999999999 0 0 0 -2.6956699856847175 7.174871904974261" stroke="#000000ff" stroke-width="0.13729977116704806" stroke-linecap="round" fill="none"/>
  </g>
</svg>`;
      // <path d="M19.25 25.254V8.148l6.665-6.664L24.43 0l-6.97 6.971a1.05 1.05 0 0 0-.308.742v18.59c0 .58.47 1.05 1.05 1.05h7.745v-2.099h-6.696z" fill="#000000FF"/>

      const drawLines = (page) => {
        Array(10)
          .fill(1)
          .map((v, i) => i)
          .forEach((v) => {
            page.drawText('----' + v, {
              x: 5,
              y: v * 100,
              size: 20,
            });
          });
        Array(100)
          .fill(1)
          .map((v, i) => i)
          .forEach((v) => {
            page.drawText(v % 5 == 0 ? '---' : '--', {
              x: 5,
              y: v * 10,
              size: 20,
            });
          });
      };
      const drawGrid = (page) => {
        Array(parseInt(page.getHeight() / 10))
          .fill(1)
          .map((v, i) => {
            page.drawLine({
              start: { x: 0, y: i * 10 },
              end: { x: page.getWidth(), y: i * 10 },
            });
          });
        Array(parseInt(page.getWidth() / 10))
          .fill(1)
          .map((v, i) => {
            page.drawLine({
              start: { x: i * 10, y: 0 },
              end: { x: i * 10, y: page.getHeight() },
            });
          });
      };
      // drawGrid(firstPage)
      drawLines(firstPage);

      firstPage.drawSvg(svg, {
        height: 602,
        width: 409,
        // height: 32,
        // width: 32,
        x: 100,
        y: 700,
      });

      // firstPage.drawSvg(svg3, {
      //   height: 100,
      //   width: 100,
      //   x: 100,
      //   y: 700
      // })

      // firstPage.drawSvg(svg2, {
      //   height: 100,
      //   width: 100,
      //   x: 100,
      //   y: 500
      // })

      // firstPage.drawSvg(svg4, {
      //   height: 100,
      //   width: 100,
      //   x: 100,
      //   y: 400
      // })
      const pdfBytes = await pdfDoc.save();

      renderInIframe(pdfBytes);
    }
  </script>
</html>
